<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
    <title>MAC数据查询</title>
    
    <%@ include file="../common.jsp" %>
	<script type="text/javascript" src="${path }/static/vender/bootstrap/bootstrap-paginator.min.js"></script>
	<script type="text/javascript" src="${path }/static/vender/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="${path }/static/js/phoneCompanyData.js"></script>
  </head>

  <body>
	<jsp:include page="${pagePath }/header.jsp">
		<jsp:param value="1" name="active"/>
	</jsp:include>
  	
    <div class="container-fluid">
      <div class="row">
      	<div class="col-sm-3 col-md-2 sidebar">
			<jsp:include page="left_navbar.jsp">
				<jsp:param value="2" name="active"/>
			</jsp:include>
		</div>
		
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
          <h3 class="page-header">MAC数据查询</h3>
          <div class="row">
          	<div class="col-sm-12">
          		<label class="form-inline">MAC:
                	<input type="text" class="form-control" name="deviceMac" id="deviceMac" style="width: 170px;" placeholder="如08-D4-0C-47-1A-4E">
                </label>
                &emsp;&emsp;
                <label class="form-inline">采集点: 
					<select class="form-control" name="deviceNo" id="deviceNo">
						<option value="">选择采集点</option>
					</select>
				</label>
				&emsp;&emsp;
                <label class="form-inline">开始时间:
                	<input name="startTime" id="startTime" type="text" class="form-control" style="width: 160px;" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" readonly />
               	</label>
               	&emsp;&emsp;
                <label class="form-inline">结束时间:
                	<input name="endTime" id="endTime" type="text" class="form-control" style="width: 160px;" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" readonly />
               	</label>
               	&emsp;&emsp;
               	<button type="button" class="btn btn-info" onclick ="initPage();getInfoList();">&nbsp;检索&nbsp;</button>
           	</div>
		  </div>
          
          <br/>

          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>#</th>
                  <th>设备MAC</th>
                  <th>厂商</th>
                  <th>采集点</th>
                  <th>出现时间</th>
                  <th>离开时间</th>
                  <th>停留时间</th>
                </tr>
              </thead>
              <tbody id="listInfo">
             	
              </tbody>
            </table>
          </div>
          <div style="background-color: #f5f5f5;" class="text-center">
			<ul id="pageChoose"></ul>
		  </div>
		  <!-- 分页条 -->
        </div>
      </div>
    </div>
  	<input id="curPage" type="hidden" />
	<input id="totalPage" type="hidden" />
	
	
	<jsp:include page="${pagePath }/footer.jsp"></jsp:include>

	<script type="text/javascript">
		$(document).ready(function() {
			var defaultDate = new Date(new Date());
			var startTimeDefault = new Date;
			startTimeDefault.setHours(startTimeDefault.getHours () - 1);
			$("#endTime").val(defaultDate.format("yyyy-MM-dd hh:mm:ss"));
			$("#startTime").val(startTimeDefault.format("yyyy-MM-dd hh:mm:ss"));
			initDevices();
			getInfoList();
		});
		
		function initPage(){
			$('#curPage').val("");
		}
	
		function getInfoList(){
			var PAGE_SIZE = 10;
			var curPage = $('#curPage').val();
			var totalPage = $('#totalPage').val();
			var deviceMac = $("#deviceMac").val();
			var deviceNo = $("#deviceNo").val();
			var startTime = $("#startTime").val();
			var endTime = $("#endTime").val();
			if(curPage == ""){
				curPage = 1;
			}
			
		    $.ajax({
		        type: "post",
		        url: "${path }/data/flowList",
		        data: {
		        	"curPage" : curPage,
					"totalPage" : totalPage,
					"deviceMac" : deviceMac,
					"deviceNo" : deviceNo,
					"startTime" : startTime,
					"endTime" : endTime
		        },
		        success: function(data) {
		        	$('#curPage').val(data.currentPage); //当前页
					$('#totalPage').val(data.totalPage); //总页数
					$("#listInfo").empty();
					$("#pageChoose").empty();
					if (data.totalCount > 0) {
						$.each( data.listInfo, function(i, item) {
							var index = PAGE_SIZE * (curPage - 1) + 1 + parseInt(i);
							var standingTime = getTime(item.goTime,item.inTime);
							var deviceName = "大门口";
							$("#listInfo").append(
								"<tr><td>"
								+ index
								+ "</td><td>"
								+ checkUndefined(item.mac)
								+ "</td><td>"
								+ checkUndefined(phoneCompanyData[item.mac.substring(0,8)])
								+ "</td><td>"
								+ checkUndefined(item.deviceName)
								+ "</td><td>"
								+ checkUndefined(dateForm(item.inTime))
								+ "</td><td>"
								+ checkUndefined(dateForm(item.goTime))
								+ "</td><td>"
								+ standingTime
								+ "</td></tr>"
							);
						});
						setupPageChoose(data.currentPage, data.totalPage);
					} else {
						$("#listInfo").append(
							"<tr><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td></tr>");
					}
				},
				error : function(error) {
					alert("错误代码：" + error.status + "。" + "错误内容:"+ error.statusText + "。");
				}
			});
		}
		
		//设置分页
		function setupPageChoose(curPage, totalPage) {
			if (totalPage != 0) {
				$('#pageChoose').bootstrapPaginator({
					bootstrapMajorVersion : 3,
					currentPage : curPage,
					totalPages : totalPage,
					numberOfPages : 10,
					size : "small",
					alignment : "center",
					itemTexts : function(type, page, current) {
						switch (type) {
						case "first":
							return "首页";
						case "prev":
							return "上一页";
						case "next":
							return "下一页";
						case "last":
							return "尾页";
						case "page":
							return page;
						}
					},
					onPageClicked : function(e, originalEvent, type, page) {
						$('#curPage').val(page);
						getInfoList();
					}
				});
			}
		}
		
		//初始化下拉菜单
		function initDevices(){
			
		    $.ajax({
		        type: "post",
		        url: "${path }/dev/getAllDevices",
		        success: function(data) {
					$("#deviceNo").empty();
					$("#deviceNo").append("<option value= '' > 所有  </option>");
					if (data.devices.length > 0) {
						//解析数组
	                    $.each(data.devices,function(i, item) {
	                        $("#deviceNo").append("<option value=" + item.devNo + "  >" + item.devName + "</option>");
	                    });
					} else {
						$("#deviceNo").append("<option value= '' >加载失败</option>");
					}
				},
				error : function(error) {
					alert("错误代码：" + error.status + "。" + "错误内容:"+ error.statusText + "。");
				}
			});
		}
	</script>
</body></html>